/* eslint-disable react-refresh/only-export-components */
import { useSearchParams } from 'react-router-dom'
import MyNavBar from '../../components/navbar'
import { getTrainListApi } from '../../api/train'
import TicketList from './components/TicketList'
import NavDate from '../../components/navdate'
import TicketFooter from './components/TicketFooter'
import styles from './css/train.module.css'

function TrainList() {
  const [sp] = useSearchParams()
  const start = sp.get('start')
  const end = sp.get('end')
  const date = sp.get('date')

  return (
    <div className={styles.box}>
      {/* 顶部导航栏 */}
      <MyNavBar title={start + ' → ' + end} />

      {/* 日期区域 */}
      <NavDate date={date} />

      {/* 车票的列表组件 */}
      <TicketList />

      {/* 底部的筛选区域 */}
      <TicketFooter />
    </div>
  )
}

export default TrainList

export const loader = async ({ request }) => {
  // 把接口需要的数据对象，准备好
  const url = new URL(request.url)
  const data = Object.fromEntries(url.searchParams)
  // 调用接口
  const { data: res } = await getTrainListApi(data)
  return { list: res }
}
